<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /**
         * 需求：当用户点击了验证按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
         * 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。
         */
        //1.创建点击事件方法
        function onclickFun() {

            //2.获取标签对象
            var usernameDemo = document.getElementById("username");
                // alert(usernameDemo.id);
                // alert(usernameDemo.type);
                // alert(usernameDemo.value);
            var usernameText=usernameDemo.value;//获取用户输入的值
            alert(usernameText);
            //3.验证对象：字符串是否符合某个规则，使用正则表达式技术
            var patt=/^\w{5,12}$/;
            /**
             * test():方法用于测试某个字符串，是不是匹配我的规则 ，
             *  匹配就返回 true。不匹配就返回 false.
             */
            if(patt.test(usernameText)){
                alert("用户名合法")
            }else{
                alert("用户名非法")

            }


        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username"  value="abc"/>
    <button onclick="onclickFun()">验证</button>

</body>
</html>